import React, { Component } from 'react';
import {createStackNavigator, createBottomTabNavigator} from 'react-navigation';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Button
} from 'react-native';
import Page2 from '../../pages/Page2';
import Page3 from '../../pages/Page3';
import mine from '../../pages/my/mine';

import Ionicons from 'react-native-vector-icons/Ionicons'
import WelcomePage from '../../pages/WelcomePage';

import {Provider} from 'mobx-react';
import appState from '../../store/app-store';

// 最热页面
import PopularPage from '../../pages/PopularPage';

// 我的自定义标签页
import CustomKeyPage from '../../pages/my/CustomKeyPage';
// 自定义左边按钮
import MenuLeft from '../../common/util/MenuLeft';

// webview测试页面
import WebviewTest from '../../pages/WebviewTest';

//最热详情页面
import RepositoryDetail from '../../pages/RepositoryDetail';

// 趋势主页面
import TrendingPage from '../../pages/TrendingPage';

//极光推送页面
import PushTest from '../../pages/PushTest';

//测试图片裁剪
import Test from '../../pages/Test';


// let PopularPageCom = createStackNavigator({
//     PopularPageBootom:{
//         screen: PopularPage,
//     }
// },{
//     navigationOptions: {
//         header:null,
//     }
// });
// {
//     headerMode: 'screen',
//         mode: Platform.OS === 'ios' ? 'modal' : 'card',
//         navigationOptions: {
//         headerStyle: {
//             backgroundColor: '#2196f3',
//         },
//         headerTintColor: '#ffffff',
//             headerTitleStyle: {
//             fontWeight: 'normal'
//         }
//     }
// }

// 我的自定义标签页
// let CustomKeyPageCom = createStackNavigator({
//     CustomKeyPage:{
//         screen: CustomKeyPage,
//     }
// },{
//     navigationOptions: {
//         header: null
//     }
// });

const AppTabNavigator = createBottomTabNavigator({
    Page1: {
        screen: PopularPage,
        navigationOptions:{
	        tabBarLabel: "最热",
            tabBarIcon:({tintColor, focused})=>(
                <Ionicons
                    name = {focused ? 'ios-flame': 'ios-flame-outline'}
                    size = {26}
                    style = {{color: tintColor}}
                />
            )
        }
    },
    Page2: {
        screen: TrendingPage,
        navigationOptions:{
            tabBarLabel: '趋势',
            tabBarIcon:({tintColor, focused})=>(
                <Ionicons
                    name = {focused ? 'ios-trending-up': 'ios-trending-up-outline'}
                    size = {26}
                    style = {{color: tintColor}}
                />
            )
        }
    },
    Page3: {
        screen: PushTest,
        navigationOptions:{
            tabBarLabel: '收藏',
            tabBarIcon:({tintColor, focused})=>(
                <Ionicons
                    name = {focused ? 'ios-albums': 'ios-albums-outline'}
                    size = {26}
                    style = {{color: tintColor}}
                />
            )
        }
    },
    Page4: {
        screen: mine,
        navigationOptions:{
            tabBarLabel: '我的',
            tabBarIcon:({tintColor, focused})=>(
                <Ionicons
                    name = {focused ? 'ios-person': 'ios-person-outline'}
                    size = {26}
                    style = {{color: tintColor}}
                />
            )
        }
    }
},{
    initialRouteName: 'Page1' //设置底部选项卡默认的页面，方便调试
});
const AppStackNavigator = createStackNavigator({
    WelcomePage: {
        screen: WelcomePage,
    },
    Test: {
        screen: Test
    },
    // 自定义标签页面
    CustomKeyPage: {
        screen: CustomKeyPage,
    },
    // 最热模块webView详情页
    RepositoryDetail: {
        screen: RepositoryDetail,
    },
    TabNav: {
        screen: AppTabNavigator,
    }
},{
    navigationOptions: {
        header:null,
    }
});

export default class AppNavigation extends Component {
    render(){
        return (
            <Provider appState={appState}>
                <AppStackNavigator/>
            </Provider>
        )
    }
}